
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: The YUI Global Object: YUI 2 in 3</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
<style type="text/css" id="styleoverrides">
#cal1Cont {
    background-color:#004C6D;
    width: 200px;
}
#cal1Cont table tr {
    background-color:#004C6D;
}

#cal1Cont div.calheader {
    cursor: move;
}

#cal1Cont .yui3-calendar {
    width:auto;
    background-color:transparent;
}

#cal1Cont .yui3-calendar tr, #cal1Cont .yui3-calendar th {
    background-color:transparent;
    vertical-align:middle;
    text-transform:none;
    color:#fff;
}

#cal1Cont .yui3-calendar a:hover {
    text-decoration:none;
}

#results {
    background-color:#8DD5E7;
    border:1px solid black;
    position: absolute;
    top: 15px;
    right: 5px;
    width: 300px;
}
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: The YUI Global Object: YUI 2 in 3</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>The YUI Global Object: YUI 2 in 3</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to use YUI 2.x and 3.x at the same time as well as interacting with each other.
We will make a 2.x Calendar Control draggable with 3.x Drag &amp; Drop and use 3.x's Node to handle the Calendar's Select Event.</p>
	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="yui-compat_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="cal1Cont"></div>
<div id="results">Click a date..</div>

<script>

YUI({filter:"debug", logInclude: {example:true}}).use('dd-drag', 'yui2-calendar', 'yui2-logger', function(Y) {

    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');

        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    
    cal1.renderEvent.subscribe(setupDD);
    
    cal1.selectEvent.subscribe(function(e, dates) {
        var d = dates[0][0],
            dateStr = d[1] + '/' + d[2] + '/' + d[0];

        Y.one('#results').set('innerHTML', 'You clicked on: ' + dateStr);
    });
    cal1.render();
});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Using YUI2 inside of YUI3</h3>
<p>In this example, we are using the new YUI 3 support for loading and sandboxing YUI2. From the <code>YUI().use()</code> statement, you will be able to load any module/utility/widget from YUI 2 and use it like you would in YUI 2.</p>

<h3>Creating your YUI instance</h3>
<p>Now we need to create our YUI instance with the <code>dd-drag</code> and <code>yui2-calendar</code> modules, so we can create a YUI 2 calendar and make it draggable with YUI 3.</p>

<div id="syntax-16a8361d093e7b73a82788d66a478e1d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-16a8361d093e7b73a82788d66a478e1d-plain">YUI().use('dd-drag', 'yui2-calendar', function(Y) {
});</textarea></div>
<h3>Creating the Calendar</h3>
<p>Now that we have our tools in place, let's create the calendar. Using the new support for loading YUI2 into a YUI3 instance, you can set up a simple variable to help you cut and paste your YUI2 based code.</p>
<p>In the code sample below, we are creating a scoped variable called <code>YAHOO</code> and assigning it from <code>Y.YUI2</code>. The <code>YUI2</code> property of the <code>YUI</code> instance is a scoped version of the YUI 2 <code>YAHOO</code> object. If this page is inspected, you will notice that there is no global <code>YAHOO</code> variable.</p>
<div id="syntax-dc06714ef1af25234e8d2ef6fdebce0d" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//This will make your YUI 2 code run unmodified</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//This will make your YUI 2 code run unmodified</span>
    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">;</span>
&nbsp;
    <span class="kw2">var</span> cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span>
    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-dc06714ef1af25234e8d2ef6fdebce0d-plain">YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2;

    var cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    cal1.render();
});</textarea></div>
<h3>Making it draggable</h3>
<p>Now we make the calendar draggable with the 3.x <code>dd-drag</code> module.</p>
<p>First we listen for the renderEvent of the Calendar and set up the DD instance on it. After it's created, we need to remove the renderEvent listener as it's fired on Calendar page change.</p>
<div id="syntax-a1150a287ca1a07792146c5453d01da2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">//This will make your YUI 2 code run unmodified</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    setupDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> <span class="st0">'#cal1Cont'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'div.calheader'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        cal1.<span class="me1">renderEvent</span>.<span class="me1">unsubscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    cal1.<span class="me1">renderEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="co1">//This will make your YUI 2 code run unmodified</span>
    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">,</span>
    setupDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> <span class="st0">'#cal1Cont'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'div.calheader'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        cal1.<span class="me1">renderEvent</span>.<span class="me1">unsubscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    cal1.<span class="me1">renderEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span>
    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-a1150a287ca1a07792146c5453d01da2-plain">YUI().use('dd-drag', 'yui2-calendar', function(Y) {

    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');

        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    
    cal1.renderEvent.subscribe(setupDD);
    cal1.render();


});</textarea></div>
<h3>Handling the Calendar's Select Event with Node</h3>
<p>Now we need to hook up the <code>selectEvent</code> and handle that with 3.x's <code>Node</code>.</p>
<div id="syntax-bf0c2ad4c3f7adc90c7d315ac79734fe" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">//This will make your YUI 2 code run unmodified</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    setupDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            node<span class="sy0">:</span> <span class="st0">'#cal1Cont'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'div.calheader'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        cal1.<span class="me1">renderEvent</span>.<span class="me1">unsubscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    cal1.<span class="me1">renderEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    cal1.<span class="me1">selectEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>e<span class="sy0">,</span> dates<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        <span class="kw2">var</span> d <span class="sy0">=</span> dates<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            dateStr <span class="sy0">=</span> d<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> d<span class="br0">&#91;</span><span class="nu0">2</span><span class="br0">&#93;</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> d<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#results'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'You clicked on: '</span> <span class="sy0">+</span> dateStr<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'dd-drag'</span><span class="sy0">,</span> <span class="st0">'yui2-calendar'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">//This will make your YUI 2 code run unmodified</span>
    <span class="kw2">var</span> YAHOO <span class="sy0">=</span> Y.<span class="me1">YUI2</span><span class="sy0">,</span>
    setupDD <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> dd <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">DD</span>.<span class="me1">Drag</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
            node<span class="sy0">:</span> <span class="st0">'#cal1Cont'</span>
        <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="me1">addHandle</span><span class="br0">&#40;</span><span class="st0">'div.calheader'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
        cal1.<span class="me1">renderEvent</span>.<span class="me1">unsubscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    cal1 <span class="sy0">=</span> <span class="kw2">new</span> YAHOO.<span class="me1">widget</span>.<span class="me1">Calendar</span><span class="br0">&#40;</span><span class="st0">'cal1'</span><span class="sy0">,</span> <span class="st0">'cal1Cont'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    cal1.<span class="me1">renderEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span>setupDD<span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    cal1.<span class="me1">selectEvent</span>.<span class="me1">subscribe</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span>e<span class="sy0">,</span> dates<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> d <span class="sy0">=</span> dates<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">,</span>
            dateStr <span class="sy0">=</span> d<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> d<span class="br0">&#91;</span><span class="nu0">2</span><span class="br0">&#93;</span> <span class="sy0">+</span> <span class="st0">'/'</span> <span class="sy0">+</span> d<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">;</span>
&nbsp;
        Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'#results'</span><span class="br0">&#41;</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> <span class="st0">'You clicked on: '</span> <span class="sy0">+</span> dateStr<span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    cal1.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-bf0c2ad4c3f7adc90c7d315ac79734fe-plain">YUI().use('dd-drag', 'yui2-calendar', function(Y) {
    //This will make your YUI 2 code run unmodified
    var YAHOO = Y.YUI2,
    setupDD = function() {
        var dd = new Y.DD.Drag({
            node: '#cal1Cont'
        }).addHandle('div.calheader');

        cal1.renderEvent.unsubscribe(setupDD);
    },
    cal1 = new YAHOO.widget.Calendar('cal1', 'cal1Cont');
    
    cal1.renderEvent.subscribe(setupDD);

    cal1.selectEvent.subscribe(function(e, dates) {
        var d = dates[0][0],
            dateStr = d[1] + '/' + d[2] + '/' + d[0];

        Y.one('#results').set('innerHTML', 'You clicked on: ' + dateStr);
    });
    cal1.render();
});</textarea></div>				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    The YUI Global Object Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../yui/yui-core.html'>YUI Core</a></li><li><a href='../yui/yui-more.html'>Load All Modules</a></li><li><a href='../yui/yui-multi.html'>Multiple Instances</a></li><li><a href='../yui/yui-loader-ext.html'>YUI Loader - Dynamically Adding YUI and External Modules</a></li><li><a href='../yui/yui-extend.html'>Create Class Hierarchies with <code>extend</code></a></li><li><a href='../yui/yui-augment.html'>Compose Classes of Objects with <code>augment</code></a></li><li><a href='../yui/yui-mix.html'>Add Behaviors to Objects with <code>mix</code></a></li><li><a href='../yui/yui-merge.html'>Combine Data Sets with <code>merge</code></a></li><li><a href='../yui/yui-isa.html'>Check Data Types with <code>Lang</code></a></li><li><a href='../yui/yui-ua.html'>Browser Detection with <code>UA</code></a></li><li class='selected'><a href='../yui/yui-compat.html'>YUI 2 in 3</a></li><li><a href='../yui/yui-gallery.html'>Natively use YUI Gallery Modules</a></li><li><a href='../yui/yui-gallery2.html'>YUI 2 in 3 &amp; Gallery Modules</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More The YUI Global Object Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/yui/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_yui.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="selected "><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {filter:"debug", logInclude: {example:true}};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
